<template>
  <Layout theme="light" :class="`${prefixCls}`" class="w-full h-full">
    <LayoutHeader :class="`${prefixCls}-header`" class="items-center">
      <div class="py-15px">
        <img
          class="w-40px h-40px float-left"
          src="../../../assets/images/hw_logo.png"
        />
        <div class="font-bold text-23px float-left mt-8px ml-20px text-white">
          SaaSLanding
        </div>
      </div>
      <div class="user-drop-down"><UserDropDown></UserDropDown></div>
    </LayoutHeader>
    <LayoutContent
      style="padding: 20px 20px; width: 90%; margin: 0 auto; min-height: 80%"
    >
      <div class="bg-white mx-auto p-24px h-full rounded-2xl">
        <p class="font-bold text-3xl">所有应用</p>
        <Card></Card>
      </div>
    </LayoutContent>
    <LayoutFooter style="text-align: center">
      ————协助伙伴基于华为云构建SaaS应用
      沉淀业界SaaS最佳实践，供伙伴参考使用————
    </LayoutFooter>
  </Layout>
</template>
<script setup lang="ts">
import { LayoutHeader, LayoutFooter, Layout } from 'ant-design-vue';
import UserDropDown from './components/user-dropdown/index.vue';
import Card from './components/card/index.vue';

const prefixCls = 'saaslanding-app-card-layout';
</script>
<style lang="less">
@prefix-cls: 'saaslanding-app-card-layout';
html[data-theme='light'] {
  .ant-layout-header {
    background-color: #1565f0;
    display: flex;
    justify-content: space-between;
  }
  .user-drop-down {
    float: right;
  }
  .ant-card {
    cursor: pointer;
    transition: 0.5s;
    transition-timing-function: ease-in-out;
    height: 162px;
    width: 166px;
  }
  .ant-card:hover {
    transform: scale(1.1);
  }
}
</style>
